!important 2019 基調講演:アクセシブルHTML
https://gyazo.com/9bab2aca262c340d272987a17fbf8246
パネラー
金内透(ファシリテーター)
平尾ゆうてん
宮本采佳
宗安沙希恵
前川昌幸
海外のアクセシビリティ訴訟事例について
2006 ウェブサイトのアクセシビリティで裁判 米の視覚障害者が提訴
https://japan.cnet.com/article/20096310/
2019 ビヨンセのサイトを障害者が提訴
https://joshi-spa.jp/899299
アメリカの訴訟の11%は国外の企業を対象、その中に日本も含まれている
https://www.mitsue.co.jp/knowledge/column/20190125.html
国内の事例
総務省アクセシビリティ方針
http://www.soumu.go.jp/menu_kyotsuu/policy/webaccessibility/index.html
行政サイトはAA基準を満たすガイドライン
A, AA, AAA基準について
現実的な対応はA基準
要件定義にAAA基準を満たすようにしろ、というのがあった
セキュリティ観点?
条件反射で高いものを満たすようにしている?
ディレクター視点での要件定義 宗安沙希恵.icon
銀行サイトの案件で出てきた
しかし先方は「アクセシビリティとは?」となっている
費用として載せるのが難しいケースがある
この場合、アクセシビリティチェックを外注でやってもらった
2つの方法論 平尾ゆうてん.icon
アクセシビリティの対応をするをオプション見積もり
制作費の単価をあげてインクルードする
考え方は「品質管理」
HTMLは1つのクオリティだが、複数人で対応するときの品質管理は?
宮本 宮本采佳.icon
2019/1より株式会社スタンスに転職
コーダーがすでに2, 3人が居て、そのコードレビューをして管理してる
レビューの繰り返し対応で教育的に対応している
どれくらいで1人で対応できるようになるか?
個人差はあるが
アクセシビリティの実装に正解は無い
しかし各人のベストは尽くす
なので期間というものではない
宗安 宗安沙希恵.icon
ディレクターの対応は?
コーダー任せになってしまっている問題
アクセシビリティができる人も居ない
できる範囲でaltが入っているかなどをチェック
全ページをディレクター1人でチェックするのは不可能
なのでこれからチェックシートを作ろうとしている
前川 前川昌幸.icon
オミカレのサイトアクセシビリティ問題
https://party-calendar.net/
コントラスト比がよくない
BootStrap 3を8年続けている
フレームワークが良いのでアクセシビリティ担保はまあまあ出来ている
いずれ全面刷新する予定
AAの適合がどこまでできるかというのは掴めない
自分ともう1人のエンジニアとでプルリク出してお互いレビューし合う
平尾 平尾ゆうてん.icon
株式会社ディーゼロの場合
年間 300サイト制作
コーディング 30人の統括
全部のコードレビューは不可能
4月から部署異動
改善ツール作る・制作フローを見直す
機械的にチェックするようにできる
人間よりも従いやすい?
全体統括にした理由
1人であげる単価はこれを複数人できるようにして単価を上げたい
機械によるチェックに関して
axeブラウザチェック
axeのブラウザー拡張機能を日本語で利用できるようになりました | アクセシビリティBlog | ミツエーリンクス
Chrome拡張機能
https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd
lighthouseのエンジンを利用している
コントラストチェック
4.5 : 1をしっかり守る 前川昌幸.icon
デザイナーにコントラストについてどう思ってるか?を聞いた 前川昌幸.icon
「気にしてない」という回答
なので「気にするんでやってくれ」と返した
Colour Contrast Analyser (CCA) | TPG – Digital Accessibility Solutions
Chromeのデベロッパーツールでもカラーチェックできる
DevTools(Chrome 65)の新  |  Web  |  Google Developers
入れ子要素だったりabsoluteで重なってる要素の判定は難しい?
デザインツールがアクセシビリティ警告でるようにしてほしい 平尾ゆうてん.icon
CMS
アクセシビリティ対応 | PowerCMSの機能 | PowerCMS - カスタマイズする CMS。
「A11yc」プラグインがリリースされました | baserCMS - 国産オープンソース!フリー(無料)でコンテンツ管理に強いCMS
平尾 平尾ゆうてん.icon 製
markuplint
GitHub.icon https://github.com/markuplint/markuplint
ちょこちょこコミットはしている
altどう書く問題
宗安 宗安沙希恵.icon
アクセシビリティを考える | | muneyasu.jp
書き方は理解したが…
これ私達が書くものなのか?
本当はお客さん(クライアント)からもらうのが良いよね
とはいえ自分たちでも書き直す必要はある
なのでクライアントと一緒に考えていく必要がある
ライターが本来判別すべきこと 前川昌幸.icon
その中で適時企業がフィルタリングすべき
澤田さんによるaltの決定ツリーがよさそう
主観か客観かという代替テキスト問題 平尾ゆうてん.icon
関連:nwc_a11y#5c3aad93c2cd3f0000566b1a
スクリーンリーダーを使った人と出会ったことは?
なかなかない、ユーザーテストも難しい
https://www.youtube.com/watch?v=RLIKacI05fE
https://www.youtube.com/watch?v=p80PJXMPIDY
Webアクセシビリティの学校 in 福岡(2019/2/1) - Webアクセシビリティの学校 | Doorkeeper
ここで全盲の方が利用しているのを見た 宮本采佳.icon 平尾ゆうてん.icon
実際に利用している人はかなりたくましく使っている
辻 勝利さんはその一例
辻 勝利 – Backlog World 2019 -プロジェクトマネジメント×働き方改革-
辻ちゃん・ウエちゃんのアクセシビリティPodcast「Backlogのアクセシビリティを斬る!」 | アクセシビリティBlog | ミツエーリンクス
辻ちゃん・ウエちゃんのアクセシビリティPodCastでBacklogについてぶった斬ってた
Backlogのアクセシビリティといえば… 平尾ゆうてん.icon
Backlog、スクリーンリーダー向けアクセシビリティの改善を実施 -- 視覚障がいを持つ方もより利用しやすいサービスへ | 株式会社ヌーラボ(Nulab inc.)
これからのWebアプリケーションに求められるアクセシビリティの設計と実装
平尾ゆうてん.icon と 株式会社ヌーラボとで対応した。現在も絶賛対応中。
セレクトボックスのフォーカスインジケータが出なかった
原因はデフォルトのものではなく<div>で表現していたため
デフォルトでアクセシブルになってるのを何故使いづらくするのか? 前川昌幸.icon
what-input を使うのも1つの手段
マウス、キーボード、タップをそれぞれ判定してくれる
このライブラリを入れてもファイル全体サイズ的に見て軽微 前川昌幸.icon
ピンク本、見よう! 宮本采佳.icon
デザイニングWebアクセシビリティ: アクセシブルな設計やコンテンツ制作のアプローチ
一時的な負傷で見れなくなる場合でも使えるようにしてほしい
IT従事者はショートカットでキーボード操作を多用しているはず
まとめ:今日伝えたいこと
100点満点よりも最低限の及第点を目指そう
赤点を取らない努力
a11y ≠ 意識高い
a11y = やって当たり前 にしていく
Webに載っけている時点でアクセシビリティである
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
Press Release: W3C Launches International Program Office for WAI
アクセシビリティ勉強会呼んでくれたら行きます!
Accesibility Step - connpass 宮本采佳.icon
#!important_2019